github pages：https://rochelwang1205.github.io/sweetie/

github repo：https://github.com/rochelwang1205/sweetie

在_nav.scss及_footer.scss中撰寫，也記得要在all.scss中引入!

//all.scss
@import './layout/nav';
@import './layout/footer';

nav

<nav>
	<a href="#" class="d-desktop-none"><span class="material-icons">reorder</span></a>
	<h1><a href="#" class="logo"><img src="./assets/images/nav/logo-all-dark.svg" alt="logo"></a></h1>
	<ul class="page_btn d-mobile-none">
		<li><a href="#">首頁</a></li>
		<li><a href="#">甜點</a></li>
		<li><a href="#">登入</a></li>
	</ul>
	<a href="#"><span class="material-icons">shopping_cart</span></a>
</nav>

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:42px;
  
    ul {
      display: flex;
      gap:60px;
      font-weight: bold;
    }
    img {
      width: 100%;
      height:40px;
      }
    }

footer

<footer>
          <div class="info">
            <div class="contact_info">
              <div>
                <img src="./assets/images/footer/logotype-sm-dark.svg" alt="logo" class="logo">
              </div>
              <div>
                <p>07-1234-5678</p>
                <p>sweetaste@email.com</p>
                <p>800 高雄市新興區幸福路 520 號</p>
              </div>
            </div>
            <img src="./assets/images/footer/sm-今天是個吃甜點的好日子.svg" alt="今天是個吃甜點的好日子" class="slogan">
          </div>
          <div class="link">
            <div class="outside_link">
              <img src="./assets/images/footer/ic-line@.svg" alt="email_icon" class="icon">
              <img src="./assets/images/footer/ic-facebook.svg" alt="facebook_icon" class="icon">
            </div>
            <div>
              <p>© 2018 Sweetaste All Rights Reserved</p>
            </div>
          </div>
</footer>

footer{
    background-color: #EAF0ED;
    color: #3F5D45;
    padding: 40px 122px 30px 122px;
    margin: 0 auto;
    .info{
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
        .slogan{
            width: 60px;
        }
        .contact_info{
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            line-height: 1.5;
            font-weight: 400;
            .logo{
                width: 172px;
            }
        }
    }
    .link{
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        .outside_link{
            width: 32px;
            display: flex;
            gap: 8px;
        }
    }
}

下一篇將處理nav和footer的RWD~

💡分享：近期六角學院分享20份可商用得設計稿(真的太佛了)，附上文章連結：https://www.facebook.com/hexschool/posts/pfbid02cDLUBSiErvbdgw9HtqeKWQpgCLWZEY8dvPtjq53VU6Amc9ayoxPGpvg7K9BFpyZZl(內含設計稿網址)，分享給大家~

參考資料：

1. 甜點店商設計稿(可商用)-吳俊儀：https://xd.adobe.com/spec/934efdb7-a7e4-47d5-572e-efece0914f62-e57f/grid/?fbclid=IwAR1FdRhh7aYFQ67oXv3lO1BfhPr7ScYLrSSB7J83txA2TmTDZHaMJxE8deI
2. 以上可以結合#從零開始1️⃣4️⃣：使用emmet，更快寫出腦中所想所學，使用emmet寫出結構。

以上實作僅根據此系列提到的部分進行練習，細節沒有完全符合設計稿。請斟酌參考。